<template>
  <div class="order">
    <van-nav-bar title="我的订单" left-arrow @click-left="back" />
    <van-tabs type="card" v-model="active" @change="changeStatus">
      <van-tab v-for="(tab, i) in tabList" :key="i" :title="tab.title">
        <div class="tab-content">
          <div>
            <div class="tab-box" v-for="(item, i) in orderData" :key="i">
              <PayBox :countAndPrice="item.proInfo">
                <template #pay-title>
                  <div class="pay-title-box">
                    <div class="pay-t">{{ item.oid }}</div>
                    <div class="pay-s" v-if="item.status === 2">
                      <div class="pay-text">已完成</div>
                      <div class="pay-icon" @click="removeOrder(item.oid, i)">
                        <van-icon name="delete-o" />
                      </div>
                    </div>
                    <div class="pay-s" v-if="item.status === 1">
                      <div class="pay-text" @click="receiveOrder(item, i)">
                        确认订单
                      </div>
                    </div>
                  </div>
                </template>
                <template #pay-item>
                  <PayItem v-for="v in item.data" :key="v.sid" :item="v"></PayItem>
                </template>
              </PayBox>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import "../assets/less/order.less";
import PayBox from "../components/PayBox";
import PayItem from "../components/PayItem";
export default {
  name: "Order",
  components: {
    PayBox,
    PayItem,
  },
  data() {
    return {
      tabList: [
        {
          title: "全部",
          status: 0,
        },
        {
          title: "进行中",
          status: 1,
        },
        {
          title: "已完成",
          status: 2,
        },
      ],
      active: 0,
      orderData: [],
    };
  },

  created() {
    this.getOrderData(0);
  },

  methods: {
    back() {
      this.$router.back();
    },

    //获取订单数据
    getOrderData(status) {
      let tokenString = this.$cookies.get("tokenString");

      if (!tokenString) {
        console.log("浏览器token不存在");
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        method: "GET",
        url: this.baseURL + "/findOrder",
        params: {
          appkey: this.appkey,
          tokenString,
          status,
        },
      })
        .then((response) => {
          // console.log(response);
          this.$toast.clear();

          if (response.data.code == 700) {
            this.$toast({
              message: response.data.msg,
              forbidClick: true,
              duration: 3000,
            });
            return this.$router.push({ name: "Login" });
          }

          if (response.data.code === 70000) {
            let products = [];

            let oids = [];

            //先找oid
            response.data.result.forEach((v) => {
              v.small_img = v.smallImg;
              if (oids.indexOf(v.oid) === -1) {
                let o = {
                  oid: v.oid,
                  status: v.status,
                  proInfo: {
                    date: v.updatedAt,
                    count: 0,
                    total: 0,
                  },
                  data: [],
                };
                oids.push(v.oid);
                products.push(o);
              }
            });

            //通过oid查找相应的订单商品
            products.forEach((value) => {
              response.data.result.forEach((item) => {
                if (value.oid === item.oid) {
                  value.data.push(item);
                  value.proInfo.count += item.count;
                  value.proInfo.total += item.count * item.price;
                }
              });
            });

            // console.log('oids ==> ', oids);
            // console.log("products ==> ", products);

            this.orderData = products;
          } else {
            this.$toast({
              message: response.data.msg,
              forbidClick: true,
              duration: 3000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log(err);
        });
    },

    // 切换状态
    changeStatus(v) {
      this.getOrderData(v);
    },

    // 确认订单
    receiveOrder(item, index) {
      let tokenString = this.$cookies.get("tokenString");

      if (!tokenString) {
        console.log("浏览器token不存在");
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        method: "POST",
        url: this.baseURL + "/receive",
        data: {
          appkey: this.appkey,
          tokenString,
          oid: item.oid,
        },
      })
        .then((response) => {
          // console.log(response);
          this.$toast.clear();

          if (response.data.code == 700) {
            this.$toast({
              message: response.data.msg,
              forbidClick: true,
              duration: 2000,
            });
            return this.$router.push({ name: "Login" });
          }

          if (response.data.code == 80000) {
            item.status = 2;
            if (this.active == 1) {
              this.orderData.splice(index, 1);
            }
          }
          this.$toast({
            message: response.data.msg,
            duration: 2000,
          });
        })
        .catch((err) => {
          this.$toast.clear();
          console.log(err);
        });
    },

    // 删除订单
    removeOrder(oid, index) {
      let tokenString = this.$cookies.get("tokenString");

      if (!tokenString) {
        console.log("浏览器token不存在");
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        method: "POST",
        url: this.baseURL + "/removeOrder",
        data: {
          appkey: this.appkey,
          tokenString,
          oid,
        },
      })
        .then((response) => {
          // console.log(response);
          this.$toast.clear();

          if (response.data.code == 700) {
            this.$toast({
              message: response.data.msg,
              forbidClick: true,
              duration: 2000,
            });
            return this.$router.push({ name: "Login" });
          }

          if (response.data.code == 90000) {
            this.orderData.splice(index, 1);
          }
          this.$toast({
            message: response.data.msg,
            duration: 2000,
          });
        })
        .catch((err) => {
          this.$toast.clear();
          console.log(err);
        });
    },
  },
};
</script>
